【UIToolKit】TwoPaneSplitView

November 07, 2022


UIToolKitには TwoPaneSplitView という便利Elementが存在しています これを利用すると簡単にリスト&詳細Windowの実装ができるようになります

Document

https://docs.unity3d.com/Packages/com.unity.ui@1.0/api/UnityEngine.UIElements.TwoPaneSplitView.html

サイズ変更可能な2つの領域を持つViewElement 一つはサイズ固定で生成し、もう硬いお方はflex-growスタイルが1(残りのスペースを最大利用)適用されます また、必ず利用には2つの子要素が必要です

利用方法

簡単に挙動を確認できるようにスクリプトで生成してみました

以下のように生成し

var splitView = new TwoPaneSplitView(
           fixedPaneIndex: 0,   // 固定サイズとする箇所のIndex(0, 1...
           fixedPaneStartDimension: 200, // 固定サイズの初期幅 or 高さ
           TwoPaneSplitViewOrientation.Horizontal); // 分割方向

Add メソッドで表示する子要素を追加します。 以下サンプルコード

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using System.Collections.Generic;

public class TwoPaneSplitViewWindow : EditorWindow
{
    private string[] _texts = new string[] { "Text01", "Text02" };
		private ListView _listView;
    private VisualElement _detailElement;


		[MenuItem("Test/UI Toolkit/TwoPaneSplitViewWindow")]
		public static void ShowExample()
    {
        TwoPaneSplitViewWindow wnd = GetWindow<TwoPaneSplitViewWindow>();
        wnd.titleContent = new GUIContent("TwoPaneSplitViewWindow");
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;

        var splitView = new TwoPaneSplitView(
           fixedPaneIndex: 0,   // 固定サイズとする箇所のIndex(0, 1...
           fixedPaneStartDimension: 200, // 固定サイズの初期幅 or 高さ
           TwoPaneSplitViewOrientation.Horizontal); // 分割方向

        root.Add(splitView);

        // 1番目にはListViewでTextを並べる
        {
					_listView = new ListView(_texts, 30, 
		                makeItem: () =>
						{
							var element = new VisualElement();
							element.Add(new Label());
		
		                    return element;
						},
						bindItem: (element, index) => 
		                {
		                    element.Q<Label>().text = _texts[index];
		                })
					{
						reorderable = false,
						focusable = true,
						selectionType = SelectionType.Single
					};
		
		       _listView.onSelectionChange += OnSelectItemChange;
		
		       splitView.Add(_listView);
			}

			// 2番目にはただ選択されたテキストを配置
	    {
				_detailElement = new VisualElement();
				_detailElement.Add(new Label());
	
				splitView.Add(_detailElement);
			}
	  }

    /// <summary>
    /// リストのアイテムが押された時
    /// </summary>
    /// <param name="list"></param>
		private void OnSelectItemChange(IEnumerable<object> list)
		{
			OnDetailChange(_texts[_listView.selectedIndex]);
		}

    /// <summary>
    /// 詳細テキストの変更
    /// </summary>
    private void OnDetailChange(string text)
    {
        _detailElement.Q<Label>().text = text;
		}
}

(インデントずれすみません スペースとタブの混合)

以上で左に簡易表示としてリストを表示し、右側にその詳細を表示するViewが簡単にできました